<script>
// 顶部tab+页面切换
import { defineComponent} from 'vue'
export default defineComponent({
	name: 'WeworkQr'
})
</script>
<script setup>
import { formatDate } from '@/utils'
import { reqClientList,clientaddtag,clientdeltag,clientupdintegral,clientupdscore,postClientSync } from '@/api'
import { customerDataList } from '@/data'
import { deepClone, isEmpty, customerStatus,customerGender,customerLossingStatus } from '@/utils'
import MyIcon from '@/components/my-icon/index.vue'
import { toRaw } from '@vue/reactivity';
import labels from '../../../../components/app/label.vue'
import { ElLoading } from 'element-plus'
import { ref } from 'vue'
const loading = ref(false)
const total = ref(0)
const pageNo = ref(1)
const TestRef =ref()
const details = ref()
const dialogVisible = ref(false)
const scoreshow = ref(false)
const scoredata=ref('')
const scoreType = ref('1')
const integraldata= ref('')
const integralType = ref('1')
const queryForm = ref({
	qrId: '',
	name:'',
	staffName:'',
	tag:'',
	times:'',
	 add_way:'',
	 gender:'',
		status:'',
		page:1,
		size:20
})

const postClientsyncapi=()=>{
	// postClientsync().then(res=>{
	// 	ElMessage({
	// 		message: res.msg,
	// 		type: 'success',
	// 	})
	// 	getData()
	// })
}
const tableData = ref()
const fullscreenLoading = ref(false)
const getData = async(obj)=>{
	console.log(obj)
	console.log('gggggg')
	fullscreenLoading.value=true
	queryForm.value.page = pageNo.value
		
	
	console.log(obj,'789789')
	if(obj) {
		queryForm.value.page = 1
		queryForm.value = Object.assign(queryForm.value,toRaw(obj))
		
	}
	
	console.log(queryForm.value,'sdfsdfsdf')
	const r = await reqClientList(queryForm.value)
	if (r){
		tableData.value = r.data.item
		total.value = r.data.count
		fullscreenLoading.value=false
// 		ElMessage({
//             message: '同步成功',
//             type: 'success',
//         })

	}
	
}
// const getDatas = async(obj)=>{
// 	fullscreenLoading.value=true
// 	let queryForm = {
// 		page:pageNo.value,
// 		size:10
// 	}
// 	if(obj) {
// 		queryForm.page = 1
// 		queryForm = Object.assign(queryForm,toRaw(obj))
// 	}
// 	const r = await reqClientList(queryForm)
// 	if (r){
// 		tableData.value = r.data.item
// 		total.value = r.data.count
// 		fullscreenLoading.value=false
// 		ElMessage({
//             message: '同步成功',
//             type: 'success',
//         })

// 	}
	
// }
getData()

const multipleTableRef = ref()
const multipleSelection = ref([])
const selectAll = ref(false)


const exportExcel = () => {
	console.log('导出excel')
}
const handleCurrentChange = (val) => {
	pageNo.value = val
	getData()
}
const handleSelectAll = () => {
	multipleTableRef.value.clearSelection()
	if (selectAll.value) {
		tableData.value.forEach((row) => {
			multipleTableRef.value.toggleRowSelection(row, undefined)
		})
	}
}

const handleSelectionChange = (val) => {
	multipleSelection.value = val
	if (multipleSelection.value.length == tableData.value.length) {
		selectAll.value = true
	} else {
		selectAll.value = false
	}
}
const labeltypeshow=ref('')
const addlabel=()=>{
	labeltypeshow.value=1
	var data = {
    show:true,
    type:2,
	title:'批量打标签',
	tips:'将给满足条件的客户批量打标签，请选择标签',
	tipsshow:true,
  }
  TestRef.value.tableshow(data)
}
const removelabel=()=>{
	labeltypeshow.value=2
	var data = {
    show:true,
    type:2,
	title:'批量移除标签',
	tips:'将给满足条件的客户批量移除标签，请选择标签',
	tipsshow:true,
  }
  TestRef.value.tableshow(data)
}
const labeldataapi=(val)=>{
	console.log(multipleSelection)
	var ids = []
	for(var i = 0;i<multipleSelection.value.length;i++){
		ids.push(multipleSelection.value[i].id)
	}
	if(labeltypeshow.value == 1){
		clientaddtag({ids:ids,tags:val.id}).then(res=>{
			ElMessage({
				message: '添加成功',
				type: 'success',
			})
			getData()
		})
	}else{
		clientdeltag({ids:ids,tags:val.id}).then(res=>{
			ElMessage({
				message: '移除成功',
				type: 'success',
			})
			getData()
		})
	}

}
const syncCustomer = async()=>{
	loading.value = true
 const r = await	postClientSync()
 if (r){
	 	ElMessage({
				message: '同步成功',
				type: 'success',
			})
			queryForm.value.page = 1
			getData()
 }
 loading.value = false
}
const integral = ()=>{
	dialogVisible.value=true
}
const integralupdata = ()=>{
	var ids = []
	for(var i = 0;i<multipleSelection.value.length;i++){
		ids.push(multipleSelection.value[i].id)
	}
	clientupdintegral({ids:ids,type:integralType.value,size:integraldata.value}).then(res=>{
		integraldata.value=''
		ElMessage({
				message: '修改成功',
				type: 'success',
			})
			getData()
			dialogVisible.value=false
	})
}
const scoremodify = ()=>{
	scoreshow.value=true
}
const scoreupdata = ()=>{
	var ids = []
	for(var i = 0;i<multipleSelection.value.length;i++){
		ids.push(multipleSelection.value[i].id)
	}
	clientupdscore({ids:ids,size:scoredata.value,type:scoreType.value}).then(res=>{
		scoredata.value=''
		ElMessage({
				message: '修改成功',
				type: 'success',
			})
			getData()
			scoreshow.value=false
	})
}

const emits = defineEmits(['showDetail'])
defineExpose({
  getData
});
</script>
<template>
	<div class="app-table-box">
		<div class="" >
			<div class="app-flex-left">
				<span class="app-words-2 app-flex-left"
					>共{{ total }}个客户
					<!-- <span style="color:#409EFF;margin-left: 7px;margin-right: 7px;cursor:pointer; " @click="postClientsyncapi"><el-icon><Refresh /></el-icon>同步客户</span> -->
					<span class="app-pointer app-primary-font app-gap-words-left-s app-words-1" @click="syncCustomer">
					<MyIcon v-loading.fullscreen.lock="loading" class="icon-refresh" name="Refresh" /> 同步客户</span>
					
					<span class="app-gap-words-left-s app-words-1 weak-grey-font app-words-800"
						>已选择{{ multipleSelection.length }}个客户</span
					>
					<!-- <span class="weak-grey-font app-gap-words-left-s">|</span> -->
					<!-- <div @click="getDatas" v-loading.fullscreen.lock="fullscreenLoading"> 
						<div style="height: 4px"></div>
						<MyIcon class="app-pointer app-gap-words-left-s weak-grey-font" name="Fresh" />
					</div>
					<span class="app-words-1 weak-grey-font app-gap-words-left-s app-words-800">更新数据</span> -->
				</span>
			</div>
			<!-- <div class="app-flex-left">
				<span class="app-words-800 app-words-1 weak-grey-font app-flex-left">
					排除重复客户
					<div>
						<div style="height: 4px"></div>
						<MyIcon class="question-icon weak-grey-font" name="Question" />
					</div>
					<span class="app-words-1 app-primary-font app-gap-words-left-s app-words-800">查看</span>
				</span>
			</div> -->

			<div class="app-gap-words-left table-head app-flex-left app-gap-block-top">
				<el-checkbox v-model="selectAll" @change="handleSelectAll" size="large" />
				<span class="app-words-2 app-gap-words-left">当页全选</span>

				<!-- <el-button :disabled="multipleSelection.length == 0" class="app-btn app-gap-words-left" @click="exportExcel">
					加黑名单</el-button> -->

				<el-button :disabled="multipleSelection.length == 0" class="app-btn app-gap-words-left" @click="addlabel()">打标签
				</el-button>

				<el-button :disabled="multipleSelection.length == 0" class="app-btn app-gap-words-left" @click="removelabel()">
					移除标签</el-button>

				<el-button :disabled="multipleSelection.length == 0" class="app-btn app-gap-words-left" @click="integral()">
					修改积分</el-button>

				<el-button :disabled="multipleSelection.length == 0" class="app-btn app-gap-words-left" @click="scoremodify()">
					修改评分</el-button>

				<!-- <el-button :disabled="multipleSelection.length == 0" class="app-btn app-gap-words-left" @click="exportExcel">
					导出Excel</el-button>

				<el-button :disabled="multipleSelection.length == 0" class="app-btn app-gap-words-left" @click="exportExcel">
					导出Excel</el-button> -->
			</div>
			<el-table
				class="app-select-table app-container-radius a-mt20"
				ref="multipleTableRef"
				:data="tableData"
				style="width: 100%"
				:header-cell-style="{ color: '#909399', fontSize: '14px', backgroundColor: '#F7F9FA', padding: '10px 0' }"
				:cell-style="{ fontSize: '14px', padding: '20px 0' }"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection" fixed="left" />
				<el-table-column width="140" label="全部客户" align="left">
					<template #default="scope">
						<div class="app-flex-left">
							<el-avatar class="cho-margin" shape="square" :size="30" :src="scope.row.avatar" />
							<div>
								<div class="app-gap-words-left">
								{{ scope.row.name }}
							</div>
								<div  style="font-size:12px" class="app-gap-words-left app-words-tip-weak">
								昵称：{{ scope.row.name }}
							</div>
							</div>
						
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="staff_name" label="所属客服" align="left" />
				<el-table-column label="性别" align="left">
					<template #default="scope">
						<div v-for="(item,index) in customerGender" :key="index">
							<span v-if="item.id==scope.row.gender">{{ item.name }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="add_way" label="添加渠道" align="left" />
				
				<el-table-column label="流失状态" align="left">
					<template #default="scope">
					<div>{{scope.row.status==0?'正常':scope.row.status==1?'员工删除客户':'员工被客户删除'}}</div>
						<!-- <div v-for="(item,index) in customerLossingStatus" :key="index">
							<span v-if="item.id==scope.row.type">{{ item.name }}</span>
						</div> -->
					</template>
				</el-table-column>
				<el-table-column label="客户评分" align="left">
					<template #default="scope">
						<div class="app-flex-left">
							<el-tag type="primary">
								<div class="app-flex-left">
									<div>
										<MyIcon class="app-icon app-primary-font" name="Star" />
									</div>
									<div class="app-gap-words-left-xs">
										<span class="">
											{{ scope.row.score }}
										</span>
										<div class="app-star-bottom"></div>
									</div>
								</div>
							</el-tag>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="标签" align="left">
					<template #default="scope">
						<div class="">
							<span v-for="item in scope.row.tags">
          <el-popover v-if="item.deleted==0"

											popper-style="padding: 10px;min-width:0px"
											placement="right"
											:width="100"
											trigger="hover"
										>
											<div>已删除</div>
											<template #reference>
												<el-tag :type="item.deleted==1?'':'info'" class="app-br-10">
                            <span class="app-regular-font" >{{item.tag_name}}</span>
                      </el-tag>
											</template>
										</el-popover>

          <el-tag v-else :type="item.deleted==1?'':'info'" class="app-br-10" >
								<span class="app-regular-font" >{{item.tag_name}}</span>
          </el-tag>
        </span>

							<!-- <el-tag :type="item.deleted==1?'':'info'" class="app-br-10" v-for="(item, index) in scope.row.tags" :key="index">
								<span class="app-regular-font">{{ item.tag_name }}</span>
							</el-tag> -->
						</div>
					</template>
				</el-table-column>
				<el-table-column label="客户积分" align="left">
					<template #default="scope">
						<div class="app-flex-left">
							<el-tag type="warning">
								<div class="app-flex-left">
									<div>
										<MyIcon class="app-icon app-warning-font" name="Star" />
									</div>
									<div class="app-gap-words-left-xs">
										<span class="">
											{{ scope.row.integral }}
										</span>
										<div class="app-star-bottom"></div>
									</div>
								</div>
							</el-tag>
						</div>
					</template>
				</el-table-column>

				<el-table-column label="客户状态" align="left">
					<template #default="scope">
						<div class="app-flex-left">
							{{ customerStatus[scope.row.status]['name'] }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="添加时间" prop="createtime" align="left">
					<!-- <template #default="scope">
						{{formatDate(scope.row.createtime, 'yyyy-MM-dd hh:mm:ss')}}
					</template> -->


				</el-table-column>
				<!-- <el-table-column width="140" label="上次对话时间" prop="lastchatTime" align="left"> </el-table-column> -->
				<el-table-column label="操作" align="right">
					<template #default="scope">
						<span class="app-primary-font app-pointer" @click="emits('showDetail',scope.row.id)">详情</span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				class="app-page"
				@current-change="handleCurrentChange"
				background
				:currentPage="queryForm.page"
				layout="prev, pager, next"
				:page-size="20"
				:total="total"
			/>
		</div>
		<labels ref="TestRef" :labeldataapi="labeldataapi"  ></labels>
		<el-dialog
			v-model="dialogVisible"
			title="批量修改积分"
			width="30%"
			:before-close="handleClose"
		>
			<div style="padding-left:20px" class="app-flex-left">
				<span>积分:</span>
				  <span style="margin-left: 5px;">
        <el-select v-model="integralType" class="m-2" style="width:100px" placeholder="">
          <el-option
            label="增加"
            value="1"
          />
           <el-option
            label="减少"
            value="2"
          />
        </el-select>
        </span>
				<span style="margin-left: 5px;"><el-input v-model="integraldata" placeholder="请输入积分" style="width: 200px;" type="number" /></span>
			</div>
			<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="integralupdata()">
				确定
				</el-button>
			</span>
			</template>
		</el-dialog>
		<el-dialog
			v-model="scoreshow"
			title="批量修改评分"
			width="30%"
			:before-close="handleClose"
		>
			<div style="padding-left:20px" class="app-flex-left">
				<span>评分:</span>
				 <span style="margin-left: 5px;">
        <el-select v-model="scoreType" class="m-2" style="width:100px" placeholder="">
          <el-option
            label="增加"
            value="1"
          />
           <el-option
            label="减少"
            value="2"
          />
        </el-select>
        </span>
				<span style="margin-left: 5px;"><el-input v-model="scoredata" placeholder="请输入评分" style="width: 200px;" type="number" /></span>
			</div>
			<template #footer>
			<span class="dialog-footer">
				<el-button @click="scoreshow = false">取消</el-button>
				<el-button type="primary" @click="scoreupdata()">
				确定
				</el-button>
			</span>
			</template>
		</el-dialog>
		
	</div>
	
</template>
<style lang="scss">
@import url('../../../../style/app-component.scss');
@import '../../../../style/mixin.scss';
</style>
